<template>
	<view>
		<view class="p32" v-if="list.length">
			<view class="flex justify-between">
				<view class="">共计1件商品</view>
				<view class="">未支付</view>
			</view>
			<view class="">地址</view>
			<view class="flex p32" v-for="(item, index) in list" :key="item.id">
				<view class="">
					<image :src="item.goods.cover_url" mode="aspectFill" style="width: 230rpx;height: 200rpx;"></image>
				</view>
				<view class="flex flex-col carts-right">
					<view class="">
						<view class="">{{item.goods.title}}</view>
					</view>
					<view class="flex items-center">
						<view class="color-f00 mr12">￥{{item.goods.price}}</view>
            <view class="">x{{item.num}}</view>
					</view>
					<view class="">订单编号：</view>
					<view class="">下单时间：</view>
					<view class="">商品总额：￥</view>
				</view>
			</view>
			<view class="flex fixed_bottom">
        <view class="ml12">合计￥</view>
				<view class="btn-account">立即付款</view>
			</view>
		</view>
		<view class="" v-else>
			<u-empty
				mode="car"
				icon="http://cdn.uviewui.com/uview/empty/car.png"
			>
			</u-empty>
		</view>
	</view>
</template>

<script>
import { ordersDetail } from '@/config/api'
	export default {
		data() {
			return {
				list: [],
        address: [],
				id: ''
			}
		},
		onLoad(option) {
			this.id = option.id
			this.getCartsPreview() 
		},
		methods: {
			/**
     * 获取订单预览数据
     */
    async getCartsPreview() {
      if(this.$u.utils.isLogin()) {
				const params = {
					include: 'goods,user,orderDetails'
				}
        const res = await ordersDetail(this.id, { params })
        // this.list = res.carts
        // this.address = res.address
      }
    },
		}
	}
</script>

<style lang="scss" scoped>
.fixed_bottom {
	box-sizing: border-box;
	position: fixed;
	bottom: 0;
	left: 0;right: 0;
	width: 100%;
	height: 80rpx;
	padding: 0 32rpx;
	z-index: 2;

	justify-content: space-between;
	align-items: center;
	background-color: #fff;
}
.btn-account {
  
}
.carts-right {
	height: 200rpx;
	justify-content: space-around;
}
</style>
